import React, { useEffect, useState } from 'react'
import { Form, Input, Button, Select, Table, Space, Cascader, message, Popconfirm } from 'antd'

import { apiGroupList } from '../../api'
import { CityOption } from '../../utils/china'
const { Option } = Select

// 团购管理
const Index = () => {
    // 表格数据
    const [data, setData] = useState([])

    useEffect(() => {
        getList()
    }, [])

    // 获取数据
    const getList = () => {
        apiGroupList().then((res: any) => {
            setData(res.data.data)
        })
    }

    // 点击事件grouponFinish
    const grouponFinish = (value: any) => {

    }


    // 删除数据
    const dellist = (record: any) => {

    }

    // table
    const columns: any = [
        {
            title: '序号',
            width: '5%',
            editable: true,
            render: (v: any) => {
                let index = data.findIndex((item: any) => item.id == v.id)
                return index + 1
            }
        },
        {
            title: '图片',
            dataIndex: 'img',
            width: '15%',
            editable: true,
        }, {
            title: '楼盘名称',
            dataIndex: 'name',
            width: '10%',
            editable: true,
        },
        {
            title: '楼盘地址',
            dataIndex: 'address',
            width: '20%',
            editable: true,
        }, {
            title: '发起人',
            dataIndex: 'username',
            width: '5%',
            editable: true,
        }, {
            title: '开始时间',
            dataIndex: 'time',
            width: '15%',
            editable: true,
        }, {
            title: '团购状态',
            dataIndex: 'state',
            width: '10%',
            editable: true,
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (text: any, record: any, index: any) => {
                return (
                    <Space>

                        <Popconfirm
                            title="您确定要删除吗?"
                            onConfirm={() => dellist(record)}
                            // onCancel={cancel}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button type="primary" danger >删除</Button>

                        </Popconfirm>

                    </Space>
                )
            }
        },
    ]


    //级联选择
    const [ThreeValue, setThreeValue] = useState<any>({})
    const onChange = (value: any) => {

        let list: any = {}
        // 转换对象格式
        for (var key in value) {
            list[key] = value[key];
        }

        console.log(list);


        setThreeValue(list);
    }

    return (
        <div style={{ height: "80vh", display: 'flex', flexDirection: 'column' }}>

            {/* 搜素事件 */}
            <div style={{ display: 'flex', marginTop: '20px' }}>
                <Form name="horizontal_login" layout="inline" onFinish={grouponFinish}>
                    <Form.Item name="username" label="名称：">
                        <Input placeholder="请输入楼盘名称" />
                    </Form.Item>

                    <Form.Item name="state" label="状态：" style={{ width: '200px' }}>
                        <Select>
                            <Option value="已开团">已开团</Option>
                            <Option value="未开团">未开团</Option>
                        </Select>
                    </Form.Item>

                    {/* 三级联动 */}
                    <Cascader options={CityOption} onChange={onChange} placeholder="请选择城市数据" fieldNames={{ label: 'name', value: 'name', children: 'children' }} />




                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                htmlType="submit"
                            >
                                搜素
                            </Button>
                        )}
                    </Form.Item>
                </Form>


            </div>

            {/* 表格 */}
            <div style={{ marginTop: '10px', height: '80%', overflowY: 'scroll' }}>
                <Form component={false}>
                    <Table
                        bordered
                        dataSource={data}
                        columns={columns}
                        rowClassName="editable-row"
                        rowKey='id'
                    />
                </Form>
            </div>
        </div >
    )
}

export default Index 